<template>
  <div class="wrap">
    <el-form
      :model="ruleForm"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    {{$store.state.name}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
    };
  },
  mounted() {
    //  console.log(this.$store.state.仓库中定义的数据名就可以拿到仓库里定义的数据) 

  },
  methods: {
    submitForm(formName) {
      console.log(this.ruleForm.username);
      console.log(this.ruleForm.password);
      window.location.href = "/home"
      // 假设用户名密码输入对了

      window.localStorage.setItem("token","123456")
    },
    resetForm(formName) {
    //   this.ruleForm = {};
    //   this.$refs[formName].resetFields();
    console.log(this.$refs.ruleForm);
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>
<style scoped>
  .wrap {
    width: 40%;
    height: 40%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
  
</style>